<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="天地图" />
    <title>天地图－地图API－范例－聚合Marker</title>
    <script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
    <script type="text/javascript" src="http://api.tianditu.com/js/maptools.js"></script>


    <script>
        var map;
        var zoom = 5;
        var markerClusterer;
        function onLoad() {
            //初始化地图对象
            map = new TMap("mapDiv");
            //设置显示地图的中心点和级别
            map.centerAndZoom(new TLngLat(116.40969, 39.89945), zoom);
            //允许鼠标滚轮缩放地图
            map.enableHandleMouseScroll();
            var MAX = 500;
            var markers = [];
            for (var i = 0; i < MAX; i++) {
                var lnglat = new TLngLat(Math.random() * 40 + 85, Math.random() * 30 + 21);
                markers.push(new TMarker(lnglat));
            }
            var config = {
                markers: markers
            };
            //最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
            markerClusterer = new TMarkerClusterer(map, config);
        }
    </script>
</head>
<body onLoad="onLoad()">
    <div id="mapDiv" style="height:600px"></div>
    <div style="position:absolute;right:30px;z-index:200;">
        <ul>
            <li>本示例演示如何利用聚合接口来解决加载大量标注点到地图上产生覆盖现象的问题，并提高性能。</li>
            <p><a href="http://lbs.tianditu.com/api-new/examples.html">返回所有范例列表</a></p>
        </ul>
    </div>
</body>

</html>